<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 条件筛选 -->
      <el-card class="hr-block">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="聘用形式:">
                <el-checkbox-group v-model="formData.approvalsTypeChecks">
                  <el-checkbox
                    v-for="item in approvalsType"
                    :key="item.id"
                    :label="item.id"
                    @change="changeParams"
                    >{{ item.value }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工状态:">
                <el-checkbox-group v-model="formData.approvalsStateChecks">
                  <el-checkbox
                    v-for="item in approvalsState"
                    :key="item.id"
                    :label="item.id"
                    @change="changeParams"
                    >{{ item.value }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="组织部门:">
                <el-checkbox-group v-model="formData.departmentChecks">
                  <el-checkbox
                    v-for="item in departments"
                    :key="item.id"
                    :label="item.id"
                    @change="changeParams"
                    >{{ item.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="hr-block">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="mobile" width="180" label="手机" />
          <el-table-column prop="workNumber" width="160" label="工号" />
          <el-table-column
            prop="formOfEmployment"
            width="100"
            label="聘用形式"
          />
          <el-table-column prop="departmentName" width="160" label="部门" />
          <el-table-column prop="timeOfEntry" width="160" label="入职时间">
          </el-table-column>
          <el-table-column prop="currentBasicSalary" label="工资基数" />
          <el-table-column
            prop="performance"
            label="绩效工资"
            width="100"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope" style>
              <el-button
                v-perm="'salary-change'"
                size="mini"
                type="primary"
                @click="changeSalary('ChangeSalary', scope.row)"
                >调薪</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="center"
          style="height: 50px"
          align="middle"
        >
          <el-pagination
            background
            layout="prev,pager,next"
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pageSize"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!--查看弹框-->
      <el-dialog
        :title="topLabel"
        :visible.sync="centerDialogVisible"
        width="50%"
        left
      >
        <ChangeSalary
          :user-salary="selectedSalaryInfo"
          @onDialogCancel="centerDialogVisible = false"
          @success="getSalarysList()"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getSalarysList } from '@/api/salary'
import { getDepartment } from '@/api/department'
import ChangeSalary from './components/change-salary'
// import parseTime from '@/utils/paser-time'

export default {
  name: 'UsersTableIndex',
  components: { ChangeSalary },
  data () {
    return {
      centerDialogVisible: false,
      topLabel: '转正',
      approvalsType: [
        {
          id: 1,
          value: '正式'
        },
        {
          id: 2,
          value: '非正式'
        }
      ],
      approvalsState: [
        {
          id: '1',
          value: '在职'
        },
        {
          id: '2',
          value: '离职'
        }
      ],
      department: [],
      subsidyScheme: [],
      list: [],
      departments: [],
      loading: false,
      page: {
        page: 1,
        pageSize: 5
      },
      tips: {},
      yearMonth: '',
      formData: {
        approvalsTypeChecks: [],
        approvalsStateChecks: [],
        departmentChecks: []
      },
      selectedSalaryInfo: {},
      selectUserId: null,
      currentComponent: ''
    }
  }, created () {
    this.getSalarysList() // 获取工资
    this.getDepartment() // 获取组织
  },
  methods: {
    // 对聘用形式进行文本显示
    formatEmployment (row) {
      const data = this.approvalsType.find(item => item.id === row.formOfEmployment.toString())
      return data ? data.value : '未知'
    },
    async getSalarysList () {
      this.loading = true
      const { rows, total } = await getSalarysList({ ...this.page, ... this.formData })

      this.list = rows.map(row => {

        const employmentType = this.approvalsType.find(type => type.id == row.formOfEmployment);
        return {
          ...row,
          formOfEmployment: employmentType ? employmentType.value : '未知'
        };
      });
      this.page.total = total
      this.loading = false
    },
    // 获取组织列表
    async getDepartment () {
      const res = await getDepartment()
      this.departments = res.slice(1)
    },
    async getTips () {
      const { tipsRes } = await getTips()
      this.tips = tipsRes
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getSalarysList()
    },
    async changeSalary (key, info) {
      this.topLabel = '调薪'
      this.currentComponent = key
      this.centerDialogVisible = true
      this.selectedSalaryInfo = info
    },
    // 查询参数发生变化
    changeParams () {
      this.page.page = 1 // 重置第一页
      this.getSalarysList() // 重新拉取工资数据
    }
  }
}
</script>
